<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.css">
    <script src="./vue.js"></script>
    <style>
        td {
            width: 25%;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="form-group">
            <label for="exampleInputEmail1">姓名</label>
            <input type="text" class="form-control" placeholder="姓名" v-model="name">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">电话</label>
            <input type="text" class="form-control" placeholder="电话" v-model="phone">
        </div>
        <button class="btn btn-info" @click="add" v-show="flag">添加</button>
        <button class="btn btn-primary" @click="modify_f" v-show="!flag">修改</button>
        <button class="btn btn-warning" @click="reset">重置</button>
        <br><br>
        <table class="table table-bordered">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <!-- 根据arr中的内容渲染表格 -->
            <tr v-for="(item,index) in arr">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>
                    <button class="btn btn-danger" @click="del(index)">删除</button>
                    <button class="btn btn-warning" @click="modify(index)">修改</button>
                </td>
            </tr>
            <!-- 判断arr中是否有数据，以此渲染该行表格 -->
            <tr v-show="arr.length==0">
                <td style="border: none;">暂无数据</td>
            </tr>
        </table>
        <!-- 清空表格中的内容 -->
        <button type="submit" class="btn btn-danger" @click="clear" v-show="arr.length>0">删除全部</button>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "",
            phone: "",
            arr: [],
            flag: true,
            // 在v-for中获取到的索引值
            index:0,
        },
        methods: {
            // 添加数据到arr中
            add() {
                if (this.name == "" || this.phone == "") {
                    alert("请输入内容");
                    return;
                }
                this.arr.push({
                    id: this.arr.length + 1,
                    name: this.name,
                    phone: this.phone
                })
                this.name = "";
                this.phone = "";
            },
            // 重置输入框中的内容
            reset() {
                this.name = "";
                this.phone = "";
            },
            // 根据索引删除arr中的数据
            del(ind) {
                this.arr.splice(ind, 1);

                for (let i = 0; i < this.arr.length; i++) {
                    this.arr[i].id = i + 1
                }
            },
            // 点击修改，输入框中呈现内容，添加按钮变为修改按钮
            modify(ind) {
                this.flag = false;
                this.index = ind;
                this.name = this.arr[ind].name;
                this.phone = this.arr[ind].phone;
            },
            // 点击修改arr中的数据
            modify_f() {
                this.flag = true;
                this.arr[this.index].name = this.name;
                this.arr[this.index].phone = this.phone;
                this.name = "";
                this.phone = "";
                this.index = 0;
            },
            // 清空表格内容
            clear() {
                this.arr = [];
            },
        }
    })
</script>

</html>